import { createStore, applyMiddleware } from "redux";

import rootReducer from "./reducers";

// 1. 安装导入自中间件
// import logger from 'redux-logger'
import thunk from 'redux-thunk'
import  { composeWithDevTools} from 'redux-devtools-extension'


// 了解：自己写中间件，理解中间件原理
const logger = store => next => action => {
  console.log('prev state:', store.getState()) // 更新前的状态
  // 记录日志代码
  console.log('dispatching', action)
  // 如果只使用了一个中间件：
  // 那么，next 就表示原始的 dispatch
  // 也就是：logger中间件包装了 store.dispatch
  let result = next(action)
  // 上面 next 代码执行后，redux 状态就已经更新了，所以，再 getState() 拿到的就是更新后的最新状态值
  // 记录日志代码
  console.log('next state', store.getState()) // 更新后的状态
  return result
}




// 2. 通过redux的applyMiddleware创建中间件集合
const middlewares = applyMiddleware(thunk, logger)
// 3. 在createStore的第二个参数传入中间件集合接口
const store = createStore(rootReducer, composeWithDevTools(middlewares))

export default store